<template>
    <view class="main">
        <mescroll-uni
            class="listview"
            v-if="loadOk"
            ref="mescrollRef"
            @init="mescrollInit"
            :height="listHeight"
            :down="downOption"
            @down="downRefresh"
            :up="upOption"
            @up="GetPostageTemplatePageList">
            <view style="height: 20rpx"></view>
            <view class="template-group" v-for="(item, index) in templatelist" :key="item.ID">
                <view class="template-list">
                    <view class="logistics-company">
                        <text class="template-title">{{ item.Title }}</text>
                        <text class="company-name">{{ item.ExpressName }}</text>
                    </view>
                    <text class="price"
                        >资费：{{ item.StartLimit }}{{ getUnit(item.CountWay) }}{{ item.StartPrice }}元起每{{
                            item.ContinueLimit
                        }}{{ getUnit(item.CountWay) }}加{{ item.ContinuePrice }}元</text
                    >
                    <view class="operation">
                        <text class="template-delete" @click="templateDelete(item.ID)">删除</text>
                        <text class="template-edit" @click="templateEdit(item.PinkageType, item.ID)">编辑</text>
                    </view>
                </view>
            </view>
            <uni-popup ref="pop" type="center">
                <view class="pop-up">
                    <text class="pop-up-title">确认提示</text>
                    <text class="pop-up-alert">{{ numShow }}{{ popUpAlert }}</text>
                    <view class="pop-up-operation">
                        <text class="pop-up-cancel" @click="closePopup()">取消</text>
                        <text class="pop-up-determine" @click="listDelect">确认</text>
                    </view>
                </view>
            </uni-popup>
        </mescroll-uni>
    </view>
</template>

<script>
import appMixin from "@/utils/appMixin.js"
import freightHead from "@/pages_supplier/components/freightTemplate/freight-head.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import {
    GetPostageTemplatePageList,
    DeletePostageTemplate,
    GetPostageTemplateUsedData,
} from "@/pages_supplier/service/api/postage.js"
export default {
    data() {
        return {
            templatelist: [],
            numShow: 0,
            popUpAlert: "个商品在使用该模板,\n删除则对应商品为包邮,\n确定删除选中项?",
            delectIndex: 0,
            model: 2,
            loadOk: false,
            listHeight: "500rpx",
            downOption: {
                use: true,
            },
        }
    },
    components: {
        freightHead,
    },
    mounted() {
        this.getListHeight()
    },
    methods: {
        refresh() {
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
                setTimeout((e) => {
                    //#ifndef MP
                    this.refresh()
                    //#endif
                }, 300)
            })
        },
        getUnit(num) {
            switch (num) {
                case 0:
                    return "件"
                case 1:
                    return "千克"
                case 2:
                    return "m³"
            }
        },
        GetPostageTemplateUsedData(id) {
            let param = {
                ids: id.toString(),
            }
            GetPostageTemplateUsedData(param).then((res) => {
                if (res.State == 1) {
                    this.numShow = res.Data.UsedCount
                }
            })
        },

        GetPostageTemplatePageList() {
            let param = {
                pagesIndex: 1,
                pagesSize: 20,
            }
            GetPostageTemplatePageList(param).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    this.templatelist = res.Data
                } else {
                    this.mescroll.endBySize(0, 0)
                }
            })
        },
        closePopup() {
            this.$refs.pop.close()
        },
        templateEdit(type, id) {
            this.easyGoTo("addTemplate?id=" + id + "&type=" + type)
        },
        templateDelete(index) {
            this.$refs.pop.open()
            this.delectIndex = index
            this.GetPostageTemplateUsedData(index)
        },
        listDelect() {
            let param = {}
            param.ids = this.delectIndex
            DeletePostageTemplate(param).then((res) => {
                if (res.State == 1) {
                    this.GetPostageTemplatePageList()
                } else {
                    uni.showToast({
                        title: res.Msg,
                        icon: "error",
                    })
                }
            })
            this.$refs.pop.close()
        },
    },
    onLoad() {},
    onShow() {
        this.GetPostageTemplatePageList()
        this.$forceUpdate()
    },
    onNavigationBarButtonTap(e) {
        this.easyGoTo("addTemplate?id=" + 0 + "&type=" + 0)
    },
}
</script>

<style lang="scss">
.scroll-page {
    height: 100vh;
    margin-top: 20rpx;
    box-sizing: border-box;
}

.pop-up {
    background-color: $color-white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 20rpx;
    width: 620rpx;

    .pop-up-title {
        margin: 40rpx 0;
        font-size: 32rpx;
        font-weight: 550;
    }

    .pop-up-alert {
        text-align: center;
        font-size: 28rpx;
    }

    .pop-up-operation {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40rpx;
        border-top: 2rpx solid $color-gray-4;

        %pop-up-button {
            flex-grow: 1;
            text-align: center;
            line-height: 100rpx;
            font-size: 36rpx;
            font-weight: 550;
        }

        .pop-up-cancel {
            @extend %pop-up-button;
            border-right: 1rpx solid $color-gray-4;
        }

        .pop-up-determine {
            @extend %pop-up-button;
            color: $app-color-main;
        }
    }
}

.template-list {
    background-color: $color-white;
    padding: 30rpx 0 0 30rpx;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;

    .logistics-company {
        display: flex;
        align-items: center;
        flex-direction: column;
        align-items: flex-start;

        .template-title {
            font-size: 32rpx;
        }

        .company-name {
            font-size: 32rpx;
            margin-top: 20rpx;
        }

        .company-icon {
            width: 50rpx;
            height: 50rpx;
        }
    }

    .price {
        margin-top: 20rpx;
        font-size: 28rpx;
    }

    .operation {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin: 20rpx 0;

        .template-delete {
            display: flex;
            width: 120rpx;
            display: flex;
            border-radius: 40rpx;
            color: $color-gray-2;
            border: 2rpx solid $color-gray-2;
            justify-content: center;
            padding: 6rpx 0;
        }

        .template-edit {
            margin-left: 20rpx;
            width: 120rpx;
            display: flex;
            border-radius: 40rpx;
            color: $app-color-main;
            border: 2rpx solid $app-color-main;
            justify-content: center;
            margin-right: 40rpx;
            padding: 6rpx 0;
        }
    }
}
</style>
